<template>
	<div class="x-batch-setting" v-if="async">
		<el-button class="setting-but" size="mini" @click="open">批量设置</el-button>
		<el-dialog title="批量设置" width="40%" v-el-drag-dialog top="20vh" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
			<div v-loading="dataLoading" class="xtable-select">
				<el-alert class="alert" title="每次只能修改一项，如需修改多项请多次操作。" :closable="false"></el-alert>
				<div class="setting-box">
					<el-tabs tab-position="left" style="height: 100%;" @tab-click="tabClick">
						<el-tab-pane v-for="(column,index) in setting.batchItems" :key="index" :label="column.name">
							<el-form ref="generateForm">
								<el-form-item :required="column.required" :label="column.name" class="from-item" v-if=" column.batchType !== 'hidden' ">
									<template v-if="column.batchType == 'checkbox'||column.batchType == 4" x-verify="已验证">
										<x-checkbox v-model="viewModel[column.field]" :apiUrl="column.dataSource"></x-checkbox>
									</template>
									<template v-if="column.batchType == 'radiobutton'||column.batchType == 5" x-verify="已验证">
										<x-radio v-model="viewModel[column.field]" :apiUrl="column.dataSource"></x-radio>
									</template>
									<template v-if="column.batchType == 1009">
										<x-json :widget="column" v-model="viewModel[column.field]" :formField="column.jsonFields"></x-json>
									</template>
									<template v-if="column.batchType == 'textbox'||column.batchType == 2||column.batchType == 'textarea'||column.batchType == 3" x-verify="已验证">
										<textbox-item v-model="viewModel[column.field]" :actionType="actionType" @actionTypeChang="actionTypeChang" :placeholder="column.placeholder" :value="column.value"></textbox-item>
									</template>
									<template v-if="column.batchType == 'dropdownlist'||column.batchType == 6" x-verify="已验证">
										<x-select v-model="viewModel[column.field]" :apiUrl="column.dataSource"></x-select>
									</template>
									<template v-if="column.batchType == 'switch'||column.batchType == 15" x-verify="已验证">
										<el-switch v-model="viewModel[column.field]" :disabled="column.disabled"> </el-switch>
									</template>
									<template v-if="column.batchType == 'numberic'||column.batchType == 7" x-verify="已验证">
										<decimal-item v-model="viewModel[column.field]" :actionType="actionType" @actionTypeChang="actionTypeChang" :min="0" :precision="0" :step="column.step"></decimal-item>
									</template>
									<template v-if="column.batchType == 'decimal'||column.batchType == 18" x-verify="已验证">
										<decimal-item v-model="viewModel[column.field]" :actionType="actionType" @actionTypeChang="actionTypeChang" :min="0" :precision="4" :step="0.0001"></decimal-item>
									</template>
									<template v-if="column.batchType == 'image'||column.batchType == 10">
										<x-select-image v-model="viewModel[column.field]" :count="Number(column.mark)"></x-select-image>
									</template>
									<template v-if="column.batchType == 'vedio'||column.batchType == 101">
										<x-video-select v-model="viewModel[column.field]" :count="Number(column.mark)"></x-video-select>
									</template>
									<template v-if="column.batchType == 'audio'||column.batchType == 102">
										<x-audio-select v-model="viewModel[column.field]" :count="Number(column.mark)"></x-audio-select>
									</template>
									<template v-if="column.batchType === 'relationtags'||column.batchType == 40" x-verify="已验证:标签选择(选择多个)">
										<x-relation-select :type="column.dataSource" :label="column.name" :multiple="true" v-model="viewModel[column.field]"></x-relation-select>
									</template>
									<template v-if="column.batchType === 'relationclasssingle'||column.batchType == 410" x-verify="已验证:分类选择(选择单个)">
										<x-relation-select :type="column.dataSource" :label="column.name" :multiple="false" v-model="viewModel[column.field]"></x-relation-select>
									</template>
									<template v-if="column.batchType === 'relationclass'||column.batchType == 41" x-verify="已验证:分类选择(选择多个)">
										<x-relation-tree :type="column.dataSource" :label="column.name" v-model="viewModel[column.field]" :multiple="true"></x-relation-tree>
									</template>
									<template v-if="column.batchType == 'dataselect'||column.batchType == 4" x-verify="实体数据选择(单选)">
										<x-data-select :widget="column" v-model="viewModel[column.field]" :type="column.dataSource" :tag="column.placeHolder" :title="column.name" :field="column.mark"></x-data-select>
									</template>
									<template v-if="column.batchType == 'dataselectmultiple'||column.batchType == 1200" x-verify="实体数据选择(多选)">
										<x-data-multiple :widget="column" v-model="viewModel[column.field]" :type="column.dataSource" :tag="column.placeHolder" :title="column.name" :field="column.mark"></x-data-multiple>
									</template>
									<template v-if="column.batchType == 'datepicker'||column.batchType == 91">
										<el-date-picker v-model="viewModel[column.field]" :type="column.batchType" :placeholder="column.placeholder" :start-placeholder="column.startPlaceholder" :end-placeholder="column.endPlaceholder" :readonly="column.readonly" :disabled="column.disabled" :editable="column.editable" :clearable="column.clearable"
											:value-format="column.timestamp ? 'timestamp' : column.format" :format="column.format" :style="{ width: column.width }">
										</el-date-picker>
									</template>
									<div class="helpBlock">{{column.helpBlock}}</div>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<div class="selectText">已选数量：{{ rows.length }}</div>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save" v-if="selectField">批量设置 {{selectField.name}}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	import service from './service'
	import action from './action'
	import decimalItem from './widget/decimal-item'
	import textboxItem from './widget/textbox-item'
	export default {
		directives: {
			elDragDialog
		},
		name: 'x-batch-setting',
		components: {
			decimalItem,
			textboxItem
		},
		props: {
			setting: {
				required: true
			}, //  设置数据,
			dataModel: {}
		},
		data() {
			return {
				viewModel: null,
				formModel: null,
				actionType: 'equal',
				rows: [],
				selectField: {}, // 选择的字段
				dialogFormVisible: false,
				dataLoading: false,
				async: false
			}
		},
		mounted() {
			this.init([])
		},
		methods: {
			async init(rows) {
				this.$nextTick(() => {
					this.selectField = this.setting.batchItems[0]
					this.rows = rows
				})
				this.viewModel = service.getModel(this.setting.batchItems)
				this.async = true
			},
			tabClick(tab) {
				this.selectField = this.setting.batchItems[tab.index]
			},
			handleClose() {
				this.dialogFormVisible = false
			},
			actionTypeChang(type) {
				this.actionType = type
			},
			async save() {
				var value = this.viewModel[this.selectField.field]
				var para = {
					type: this.setting.type,
					field: this.selectField.field
				}
				if (this.actionType === 'replace') {
					para.values = action.getValues(this.rows, this.selectField, value, this.actionType, value[0], value[1])
				} else {
					para.values = action.getValues(this.rows, this.selectField, value, this.actionType)
				}

				var response = await this.$ala.httpPost('Api/Batch/Update', para)
				if (response) {
					this.$ala.success('批量更新成功,成功数量：' + response + '。请刷新重新加载数据')
					this.dialogFormVisible = false
				}
			},
			open() {
				this.dialogFormVisible = true
				this.viewModel = service.getModel(this.setting.batchItems)
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	.x-batch-setting {
		.setting-but {
			border: 1px solid #dcdee0;
			padding: 8px 10px;
			color: #333333;
		}

		.setting-box {
			.from-item .el-select /deep/ .select-popper {
				z-index: 2500 !important;
				top: auto !important;
				left: auto !important;
			}

			.el-form-item {
				display: flex;
				margin-bottom: 20px;

				.el-form-item__label {
					width: 100px;
					margin-right: 20px;
					text-align: right;
					font-size: 13px;
					color: #606266;
					font-weight: 400;
				}

				.el-form-item__content {
					width: 100%;
				}
			}

			.el-tabs__content {
				overflow: visible;
			}

			.el-tabs--left,
			.el-tabs--right {
				overflow: visible;
			}
		}

		.alert {
			margin: 0px 2%;
			width: 96%;
		}

		.setting-box {
			margin-top: 10px;
			margin-left: 2%;
			width: 96%;
			min-height: 300px;
			max-height: 500px;
		}

		.el-input-group__append {
			width: 150px;
		}

		.cuopoin {
			cursor: pointer;
			text-align: center;
		}

		.xtable-select {
			max-height: 50vh;
			height: 100%;
			overflow: scroll;
			margin-top: 15px;
			border-bottom: 1px solid #e5e5e5;
			min-height: 30vh;
		}

		.xtable-select::-webkit-scrollbar {
			width: 5px;
			height: 40px;
		}

		.xtable-select::-webkit-scrollbar-thumb {
			width: 5px;
			background-color: #dcdfe6;
			border-radius: 10px;
		}

		.el-dialog__footer {
			border-top: 1px solid #eaeefb;
		}

		.selectText {
			font-size: 12px;
			color: #716aca;
			float: left;
		}
	}
</style>